<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../build/react/umd/react.development.js"></script>
    <script src="../build/react-dom/umd/react-dom.development.js"></script>
    <script src="../build/babel/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
    <script type="text/babel">
        var lines = [
            <h1 key="1">Hello world!</h1>,
            <h2 key="2">React is awesome</h2>,
        ];

        ReactDOM.render(
            <ul>
                <li>Number:{1+9+9}</li>
                <li>String: {'hello, nice to meet you'}</li>
                <li>Boolean:{(5===5).toString()},{(5===2).toString()}</li>
                <li>Object:{new Date().toString()}</li>
                <li>Null:{null}</li>
                <li>Undefined:{undefined}</li>
                <li>NaN:{NaN}</li>
                <li>Array:{[1,2,3,4,5]}</li>
                <li id="lines"></li>
            </ul>,
            document.getElementById("root"));

            ReactDOM.render(
            <div>{lines}</div>,
            document.getElementById('lines')
        );
    </script>
</body>

</html>